<template>
  <div>
    <!-- 头部 -->
    <van-nav-bar
      title="精彩评论"
      left-arrow
      @click-left="$router.back()"
    ></van-nav-bar>
    <!-- 评论列表 -->
    <div class="item" v-for="item in commentList" :key="item.id">
      <div class="head">
        <img :src="item.user.head_img" alt />
        <div>
          <p>{{ item.user.nickname }}</p>
          <span>{{ item.create_date | FormDay }}</span>
        </div>
        <!-- 点击回复，传入评论的id -->
        <span @click="replyFn(item.id)">回复</span>
      </div>
      <!-- 嵌套评论内容 star -->
      <commentItem
        @sendData="replyFn"
        v-if="item.parent"
        :obj="item.parent"
      ></commentItem>
      <!-- 嵌套评论内容 end -->
      <div class="text">{{ item.content }}</div>
    </div>
    <!-- 底部 -->
    <commentFooter
      ref="footer"
      @updata="updataFn"
      :article="article"
    ></commentFooter>
  </div>
</template>


<script>
import commentFooter from "../components/commentFooter.vue";
import commentItem from "../components/commentItem.vue";
import { getArticleDetail, post_comment } from "../api/news";
export default {
  components: { commentFooter, commentItem },
  data() {
    return {
      article: {},
      id: "",
      commentList: [],
    };
  },
  created() {
    console.log("评论列表的接收id", this.$route.query.id);
    getArticleDetail(this.$route.query.id).then((res) => {
      this.article = res.data.data;
      // console.log();
    });
    // 评论列表的渲染
    post_comment(this.$route.query.id).then((res) => {
      console.log(46, res);
      this.commentList = res.data.data;
      //   评论回到顶部
      //   window.scollTo(0, 0);
    });
  },
  methods: {
    //   更新评论列表
    updataFn() {
      post_comment(this.$route.query.id).then((res) => {
        console.log(46, res);
        this.commentList = res.data.data;
        // 自动回到顶部
        window.scrollTo(0, 0);
      });
    },
    // 回复评论
    replyFn(id) {
      // 得到回复评论的id
      console.log(id);
      //   需要显示底部评论模块
      // 方法，可以先得到组件，然后直接在组建里调用这个方法
      //使用ref方法
      this.$refs.footer.handlerFocus();
      //   传入我们的评论id给底部组件
      this.$refs.footer.parent_id = id;
    },
  },
};
</script>


<style lang="less" scoped>
.van-nav-bar {
  border-bottom: 2px solid #ddd;
}
.item {
  padding: 10px;
  border-bottom: 1px solid #ccc;
  .head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    > img {
      width: (50/360) * 100vw;
      height: (50/360) * 100vw;
      display: block;
      border-radius: 50%;
    }
    > div {
      flex: 1;
      display: flex;
      flex-direction: column;
      margin-left: 10px;
      > span {
        font-size: 12px;
        color: #999;
        line-height: 25px;
      }
    }
    > span {
      color: #999;
      font-size: 13px;
    }
  }
  .text {
    font-size: 14px;
    color: #333;
    padding: 20px 0 10px 0;
  }
}
</style>